import { ResponseTask } from '@entities/Tasks/model/types/Task'
import { Panel } from '@shared/ui/Panel'
import { ProgressBar } from '@shared/ui/ProgressBar'
import { RemainingTime } from '@shared/ui/RemainingTime'
import { Moment } from 'moment'
import { CSSProperties, ReactNode, memo } from 'react'
import styles from './GridCardView.module.scss'

interface Props {
  date?: string
  dueDate: Moment
  onClick?: () => void
  progress?: number
  renderActions?: (task: ResponseTask) => ReactNode
  renderTags?: (task: ResponseTask) => ReactNode
  showProgressBar?: boolean
  subTasks?: ResponseTask[]
  task: ResponseTask
  title: string
}
export const GridCardView = memo(
  ({
    date,
    dueDate,
    onClick,
    progress,
    renderActions,
    renderTags,
    showProgressBar,
    subTasks,
    task,
    title,
  }: Props) => {
    const style: CSSProperties = { WebkitLineClamp: showProgressBar ? 1 : 3 }

    return (
      <Panel className={styles['task-card']} onClick={onClick} pointer withShadow>
        {renderActions?.(task)}
        <div className={styles['task-text']} style={style}>
          {title}
        </div>
        {showProgressBar && <ProgressBar current={progress || 0} total={subTasks?.length || 0} />}
        <div className={styles['task-info-details']}>{renderTags?.(task)}</div>
        <div className={styles['task-dates']}>
          <div>{date}</div>
          <div>
            <RemainingTime date={dueDate} />
          </div>
        </div>
      </Panel>
    )
  },
)
GridCardView.displayName = 'GridCardView'
